<template>
    <el-container class="home-container">
        <!-- 侧边栏区域 -->
        <el-aside :width="isCollapse ? '64px' : '240px'">
            <!-- 侧边栏 logo 区域 -->
            <router-link to='/main'>
                <div class="logo">
                    <img src="../assets/logo.png" alt="logo" :width="isCollapse ? '64px' : '163px'"
                        :height="isCollapse ? '29px' : '72.5px'">
                </div>
            </router-link>
            <!-- 侧边栏菜单区域 -->
            <el-menu background-color="#2C3B48" text-color="#D8D4D4" active-text-color="#fff" :unique-opened="true"
                :collapse="isCollapse" :collapse-transition="false">
                <!-- 一级菜单 -->
                <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id"
                    v-if="item.child.length > 0 && item.path === null">
                    <!-- 一级菜单的模板区 -->
                    <template slot="title">
                        <!-- 图标 -->
                        <i :class="item.icon"></i>
                        <!-- 文本 -->
                        <span>{{item.name}}</span>
                    </template>

                    <!-- 二级菜单的模板区 -->
                    <router-link :to='items.path' v-for="items in item.child">
                        <el-menu-item :index="items.id + ''" :key="items.id">
                            <template slot="title">
                                <i :class="items.icon"></i>
                                <!-- 文本 -->
                                <span>{{items.name}}</span>
                            </template>
                        </el-menu-item>
                    </router-link>
                </el-submenu>
                <router-link :to='item.path' v-else-if="item.path !== null">
                    <el-menu-item :index="item.id + ''">
                        <i :class="item.icon"></i>
                        <span slot="title">{{item.name}}</span>
                    </el-menu-item>
                </router-link>
            </el-menu>
        </el-aside>
        <el-container>
            <!-- 头部区域 -->
            <el-header>
                <!-- 菜单展开按钮 -->
                <div class="toggle-button" @click="toggleCollapse">
                    <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
                </div>
                <span class="title">员工管理系统</span>
                <el-dropdown>
                    <span class="el-dropdown-link">
                        {{userInfo.userName}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <el-button type="text" @click="loginOut">退出登录</el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <!-- 主体区域 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
  data() {
    return {
        userInfo: {
            userId: '',
            userName: ''
        },
        // 是否折叠 默认不折叠
        isCollapse: false,
        menuList: []
    }
  },
  methods: {
    // 退出登录
    loginOut() {
        this.$axios.get('user/logout').then(response => {
            if (response.data.code === 200) {
                window.localStorage.removeItem('token')
                window.sessionStorage.removeItem('userInfo')
                this.$message.success(response.data.message)
                this.$router.push('/login')
            }
        })
    },
    // 切换菜单折叠
    toggleCollapse() {
        this.isCollapse = !this.isCollapse
    },
    getUserInfo() {
        if (this.$store.getters.getUserInfo.userName) {
          this.userInfo = this.$store.getters.getUserInfo
      }
    },
    getMenuList() {
        this.$axios.get('/menu/list').then(response => {
            this.menuList = response.data.data
        })
    }
  },
  created() {
      this.getUserInfo(),
      this.getMenuList()
  }
}
</script>

<style lang="less" scoped>

.home-container {
    height: 100%;
}

.el-header {
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 60px;
    padding: 0 20px 0 0;
}

.el-aside {
    background-color: #2C3B48;
    color: #878686;
    text-align: center;
    line-height: 200px;
    .el-menu {
        border-right: none;
        text-align: left    ;
        // 菜单栏字体靠左
        .el-submenu {
            text-align: left;
        }
    }
}

.el-main {
    background-color: #ececed;
    color: #333;
    text-align: center;
    line-height: 160px;
}

.el-dropdown {
    float: right;
}

.el-button {
    color: #333;
}

.logo {
    height: 100px;
    align-items: center;
    position: relative; //父元素设置绝对定位
}

img {
    // width: 163px;
    // height: 72.5px;
    position: absolute; //相对定位
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto; //使其垂直居中
}

.toggle-button {
    width: 60px;
    float: left;
}

.toggle-button:hover {
    background-color: #f2f2f2;
    cursor: pointer;
}

.title {
    font-weight: 1000;
    font-size: 18px;
}

a {
    text-decoration: none;
}
</style>
